<form id="<?php echo $uniqid;?>" method="post" style="padding: 0;">
  <table border="0" width="100%" cellspacing="1" cellpadding="5" class="formtable" style="margin-bottom: 100px;">
    <tr bgcolor="#FFFFFF">
      <td colspan="2" class="tlabel" style="text-align: left"><b>基础设置</b></td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td class="tlabel" >两级收益开关：</td>
      <td>
        <el-radio-group v-model="params.usable_status">
          <el-radio label="0">关闭</el-radio>
          <el-radio label="1">开启</el-radio>
        </el-radio-group>
        <div class="title-tip">
          是否启用两级收益功能
        </div>
      </td>
    </tr>
    <tr bgcolor="#FFFFFF" v-if="params.usable_status>0">
      <td class="tlabel" >线路资格设置：</td>
      <td>
        <el-row>
          <el-button type="primary" size="mini" class="add_qualification_lines" icon="el-icon-plus" @click="add_qualification_lines" :disabled="add_line_btn_status">增加线路</el-button>
        </el-row>
        <div id="twostage_qualification" class="twostage_qualification" style="width: 76%">
          <el-row tag="ul" :gutter="5" v-for="item in qualification_lines">
            <el-col tag="li" :span="10"><span style="margin-right: 10px;">业绩区业绩达到</span><el-input-number :precision="2" :min="0" size="mini" v-model="item.num"></el-input-number><span style="margin-left: 10px;">可开通第</span><em>{{item.line}}</em><span>条线</span></el-col>
            <el-col tag="li" :span="8"><el-button type="text" size="mini" style="color: #cc3333;" @click="del_line" v-if="item.show">删除</el-button></el-col>
          </el-row>
        </div>
      </td>
    </tr>
  </table>
  <div style="position:absolute;z-index: 9999; bottom:0;width:100%; text-align:right; background-color:#F1f1f1; border:#ccc 1px solid;">
    <div style="padding:2px 15px 2px 10px; float:right;">
      <a href="javascript:void(0);" class="l-btn l-btn-small" @click="preSubmit"><span
              class="l-btn-left l-btn-icon-left"><span class="l-btn-text">保存</span><span
              class="l-btn-icon icon-ok">&nbsp;</span></span></a>
      <a href="javascript:void(0);" class="l-btn l-btn-small" @click="close"><span
              class="l-btn-left l-btn-icon-left"><span class="l-btn-text">关闭</span><span
              class="l-btn-icon icon-no">&nbsp;</span></span></a>
    </div>
  </div>
</form>
<div id="twostageconfigdlg" class="easyui-dialog" style="width:840px; height:520px;" title="信息框" closed="true"></div>

<script>
  var twostageconfigVm = new Vue({
    el: '#<?php echo $uniqid;?>',
    data: {
      params: JSON.parse('<?php echo addslashes($dataset);?>'),
      detail: {
        usable_status:0,
        qualification_lines:[],
      },
      qualification_lines:[],
      add_line_btn_status: false,
    },
    created(){
      this.qualification_lines = this.params.twostage_qualification_lines?this.params.twostage_qualification_lines:[{"line":2,"num":0,"show":true}];
      this.setLastShow();
    },
    methods: {
      preSubmit:function () {
        let that = this;
        let validate = true;
        let validateMsg = '';
        if(that.params.usable_status !== '0'){
          if(that.qualification_lines.length === 0){
            validate = false;
            validateMsg = '没有设置线路资格';
          }else{
            that.qualification_lines.forEach(value => {
              if(value.num <= 0){
                validate = false;
                validateMsg = '有线路设定值为0';
              }
            });
          }
        }
        if(validate){
          that.submit();
        }else{
          $.messager.confirm('提示', validateMsg + ' 确定继续提交吗？', function (r) {
            if (r) {
              that.submit();
            }
          });
        }
      },
      submit: function () {
        this.detail.usable_status = this.params.usable_status;
        this.detail.qualification_lines = this.qualification_lines;
        if(this.detail.qualification_lines.length>0){
          this.detail.qualification_lines.forEach(value => {
            delete value.show;
          });
        }
        $.post('/admin/twostage/config', twostageconfigVm.detail, function (data) {
          if (data.ret === 0) {
            $.messager.show({
              title: '提示',
              msg: data.msg,
              timeout: 3000,
              showType: 'slide'
            });
            $('#<?php echo $uniqid;?>').form('clear');
            $('#rightTabs').tabs('close', '两级收益设置');
          } else {
            $.messager.alert('提示', data.msg, 'warning');
          }
        }, 'json');
      },
      close(){
        $('#rightTabs').tabs('close', '两级收益设置');
      },
      add_qualification_lines(){
        if(this.qualification_lines.length > 6){
          return;
        }
        this.qualification_lines.push({
          'line':this.qualification_lines.length+2,
          'num':0,
          'show':false,
        });
        this.setLastShow();
      },
      setLastShow(){
        let lines = this.qualification_lines.length;
        if(lines){
          if(lines>6){
            this.add_line_btn_status = true;
          }else{
            this.add_line_btn_status = false;
          }
          this.qualification_lines.forEach((v,i) => {
            if(i === lines-1){
              v.show = true;
            }else{
              v.show = false;
            }
          });
        }
      },
      del_line(){
        let lines = this.qualification_lines.length;
        if(lines === 0){
          $.messager.alert('提示', '已经全部删除了', 'warning');
        }
        this.qualification_lines.splice(lines-1, 1);
        this.setLastShow();
      },
    }
  });
</script>

<style>
  .become_register_delete {
    color: #FF5959;
    cursor: pointer;
  }
  .shopro-goods-id {
    width: 5%;
    padding: 0 10px;
    text-align: center;
    flex-shrink: 0;
  }
  .shopro-goods-header {
    height: 40px;
    display: flex;
    align-items: center;
    background: #f9f9f9;
  }

  .shopro-goods-body {
    height: 50px;
    display: flex;
    align-items: center;
    border-top: 1px solid #e6e6e6;
  }

  .shopro-goods-title {
    width: 65%;
    min-width: 280px;
    display: flex;
    height: 50px;
    align-items: center;
    overflow: hidden;
    padding: 0 20px;
  }

  .shopro-goods-stock {
    width: 15%;
    min-width: 100px;
  }

  .shopro-goods-opt {
    width: 20%;
    min-width: 100px;
  }

  .shopro-goods-image {
    width: 36px;
    height: 36px;

    border: 1px solid #E6E6E6;
    box-sizing: border-box;
    border-radius: 2px;
    margin-right: 12px
  }

  .shopro-goods-add-button {
    cursor: pointer;
    color: #7438D5;
    font-size: 13px;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
  }

  .shopro-goods-add-button i {
    margin-right: 6px;
  }
  .goods-add {
    width: 80px;
    height: 30px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    background: #7438D5;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .add_qualification_lines i{
    font-size: 10px;
  }
  .twostage_qualification li em{
    margin: 0 5px;
    font-size: 14px;
    color: #ff0000;
  }
  .twostage_qualification li span{
    font-size: 14px;
  }
</style>